<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .gaibox {
            width: 200px;
            height: 150px;
            position: fixed;
            top: 200px;
            left: 200px;
            border: 2px red dashed;
            padding: 10px;
            display: none;
        }
    </style>
</head>

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <div id="box">
        <input type="text" placeholder="请输入姓名" v-model="namer">
        <input type="number" placeholder="请输入成绩" v-model.number="corder">
        <button @click="adder()">添加</button><br><br>
        <button @click="upper()">升序&ensp;<em style="color: red;"><b>(筛选过后仍可排序)</b></em></button>
        <button @click="downer()">降序&ensp;<em style="color: red;"><b>(筛选过后仍可排序)</b></em></button><br><br>
        <button @click="ji()">显示及格学生</button>
        <button @click="unji()">显示不及格学生</button>
        <button @click="backshow()">退出&ensp;<em style="color: red;"><b>筛选或搜索</b></em>&ensp;显示原数据</button><br><br>
        <input type="text" placeholder="按姓名搜索" v-model="souname">
        <button @click="search()">搜索</button>
        <p><span>平均成绩：</span>{{fen}}</p>
        <p><span>及格人数：</span>{{peo}}</p>
        <table border="2px">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>成绩</th>
                    <th>删除</th>
                    <th>修改</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in arr" :key="item.id" v-show="arris">
                    <td>{{item.name}}</td>
                    <td>{{item.cord}}</td>
                    <td><button @click="dele(item.id)">删除</button></td>
                    <td><button @click="re(item.id)">修改</button></td>
                </tr>
                <tr v-for="(item,index) in jige" :key="item.id" v-show="jigeis">
                    <td>{{item.name}}</td>
                    <td>{{item.cord}}</td>
                    <td><button @click="dele(item.id)">删除</button></td>
                    <td><!-- <button @click="re(item.id)">修改</button> -->！！请退出筛选进行修改！！</td>
                </tr>
                <tr v-for="(item,index) in bujige" :key="item.id" v-show="bujigeis">
                    <td>{{item.name}}</td>
                    <td>{{item.cord}}</td>
                    <td><button @click="dele(item.id)">删除</button></td>
                    <td><!-- <button @click="re(item.id)">修改</button> -->！！请退出筛选进行修改！！</td>
                </tr>
                <tr v-for="(item,index) in sou" :key="item.id" v-show="souis">
                    <td>{{item.name}}</td>
                    <td>{{item.cord}}</td>
                    <td><button @click="dele(item.id)">删除</button></td>
                    <td><!-- <button @click="re(item.id)">修改</button> -->！！请退出搜索进行修改！！</td>
                </tr>
            </tbody>
        </table>
        <div class="gaibox">
            <h3>修改框：</h3>
            <input type="text" placeholder="请输入姓名" v-model="gainame"><br>
            <input type="number" placeholder="请输入成绩" v-model.number="gaicord"><br>
            <button @click="gai()">确认修改</button>
        </div>
    </div>
    <script>
        new Vue({
            el: "#box",
            data: {
                arr: [
                    {
                        name: "张三",
                        cord: 54,
                        id: 1
                    }, {
                        name: "李四",
                        cord: 100,
                        id: 2
                    }, {
                        name: "王五",
                        cord: 70,
                        id: 3
                    }, {
                        name: "赵六",
                        cord: 32,
                        id: 4
                    },
                ],
                // shower: [],
                arris: true,
                jigeis: false,
                bujigeis: false,
                souis: false,
                jige: [],
                bujige: [],
                sou: [],
                namer: "",
                corder: "",
                souname: "",
                gainame: "",
                gaicord: "",
                gaiid: ""
            },
            methods: {
                adder() {
                    this.arr.push({
                        name: this.namer,
                        cord: this.corder,
                        id: this.arr.length + 1
                    })
                    this.namer = ""
                    this.corder = ""
                },
                dele(id) {
                    var a = this.arr.findIndex(item => item.id == id)
                    this.arr.splice(a, 1)
                },
                upper() {
                    this.arr.sort((a, b) => a.cord - b.cord)
                    this.jige.sort((a, b) => a.cord - b.cord)
                    this.bujige.sort((a, b) => a.cord - b.cord)
                },
                downer() {
                    this.arr.sort((a, b) => b.cord - a.cord)
                    this.jige.sort((a, b) => b.cord - a.cord)
                    this.bujige.sort((a, b) => b.cord - a.cord)
                },
                ji() {
                    this.jige = this.arr.filter(item => item.cord >= 60)
                    this.arris = false
                    this.jigeis = true
                    this.bujigeis = false
                    this.souis = false
                },
                unji() {
                    this.bujige = this.arr.filter(item => item.cord < 60)
                    this.arris = false
                    this.jigeis = false
                    this.bujigeis = true
                    this.souis = false
                },
                backshow() {
                    this.arris = true
                    this.jigeis = false
                    this.bujigeis = false
                    this.souis = false
                },
                search() {
                    this.sou = []
                    this.sou = this.arr.filter(item => item.name == this.souname)
                    this.arris = false
                    this.jigeis = false
                    this.bujigeis = false
                    this.souis = true
                    this.souname = ""
                },
                re(id) {
                    document.getElementsByClassName("gaibox")[0].style.display = "block"
                    this.gaiid = id
                },
                gai() {
                    var a = this.arr.findIndex(item => item.id == this.gaiid)
                    this.arr.splice(a, 1, {
                        name: this.gainame,
                        cord: this.gaicord,
                        id: this.gaiid
                    })
                    this.gainame = ""
                    this.gaicord = ""
                    this.gaiid = ""
                    document.getElementsByClassName("gaibox")[0].style.display = "none"
                }
            },
            computed: {
                fen() {
                    var allcords = 0
                    var pingjunfen = 0
                    this.arr.forEach(item => {
                        allcords += item.cord
                        pingjunfen = (allcords / this.arr.length).toFixed(2)
                    });
                    return pingjunfen
                },
                peo() {
                    var peoplenum = this.arr.filter(item => item.cord >= 60).length
                    return peoplenum
                },
            }
        })
    </script>
</body>

</html>